import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params }   from '@angular/router';
import { Location }                 from '@angular/common';

import { HeroService } from './hero.service';

import 'rxjs/add/operator/switchMap';

//import { Hero } from './hero';

export class Hero {
  id: number;
  name: string;
}


@Component({
  moduleId: module.id,
  template: ` <div >
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="hero.name"/>
      </div>
      <button (click)="goBack()">Back</button>
    </div>
   
  `,
  //styleUrls:["../style.css"]
})

export class HeroDetailComponent implements OnInit {

  constructor(
  private heroService: HeroService,
  private route: ActivatedRoute,
  private location: Location
  ) {}


  @Input()
  hero:any = Hero;
  ngOnInit(): void {
  this.route.params
    .switchMap((params: Params) => this.heroService.getHero(+params['id']))
    .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
  this.location.back();
  }
}